<template>
  <div class="container">
    <el-row>
      <el-card shadow="never">
        <div slot="header">
          <el-form :inline="true" :model="searchForm" size="small">
            <el-form-item label="ID" class="el-search-item">
              <el-input v-model="searchForm.sysRegionId" placeholder="区域ID" clearable></el-input>
            </el-form-item>
            <el-form-item label="创建时间" class="el-search-item">
              <el-date-picker v-model="checkedTime" value-format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item class="el-search-item">
              <el-button type="success" plain icon="el-icon-search" @click="getDataList">查询</el-button>
            </el-form-item>
            <el-form-item class="el-search-item">
              <el-button v-if='hasPerm("sys:sysRegion:add")' type="primary" plain icon="el-icon-plus" @click="openAdd">新增区域</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!--数据表格 element ui-->
        <el-table :data="tableData" :height="tableHeight" style="width: 100%">
              <el-table-column prop="sysRegionId" label="区域" align="center" sortable></el-table-column>
              <el-table-column prop="regionCode" label="区域编码" align="center" sortable></el-table-column>
              <el-table-column prop="regionPath" label="路径" align="center" sortable></el-table-column>
              <el-table-column prop="level" label="层级" align="center" sortable></el-table-column>
              <el-table-column prop="regionType" label="类型" align="center" title=" 1推广城市 0国家 2上线发布到前台 9不发布到前台" sortable></el-table-column>
              <el-table-column prop="regionName" label="名称" align="center" sortable></el-table-column>
              <el-table-column prop="zipCode" label="邮编" align="center" sortable></el-table-column>
              <el-table-column prop="telephoneCode" label="电话区号" align="center" sortable></el-table-column>
              <el-table-column prop="regionIcon" label="区域图标" align="center" sortable></el-table-column>
              <el-table-column prop="priority" label="优先级" align="center" sortable></el-table-column>
              <el-table-column prop="parentRegionId" label="上级区域" align="center" sortable></el-table-column>
              <el-table-column prop="description" label="描述" align="center" sortable></el-table-column>
              <el-table-column prop="status" label="状态" align="center" sortable></el-table-column>
              <el-table-column prop="longitude" label="经度" align="center" sortable></el-table-column>
              <el-table-column prop="latitude" label="纬度" align="center" sortable></el-table-column>
              <el-table-column prop="productCkId" label="配送仓id" title="配送仓id 父包含子" align="center" sortable></el-table-column>
          <el-table-column v-if='hasPerm("sys:sysRegion:list")' label="更多操作" align="center" width="250">
            <template slot-scope="scope">
              <el-button v-if='hasPerm("sys:sysRegion:edit")' @click="openUpdate(scope.row)" size="mini" type="text" icon="el-icon-edit">编辑</el-button>
              <el-button v-if='hasPerm("sys:sysRegion:del")' @click="deleteFun(scope.row)" size="mini" type="text" icon="el-icon-delete">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <el-pagination style="padding:0;text-align: center;" background @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper"
                       :current-page="pageNum" :page-sizes="[8, 15, 20]" :page-size="pageSize" :total="total">
        </el-pagination>
      </el-card>
      <!--新增用户对话框-->
      <el-dialog :title="dialog.dialogTitle" :visible.sync="dialog.visible" width="35%">
        <el-form :rules="rules" ref="sysRegionForm" :model="sysRegionForm" size="small" label-width="80px">
              <el-form-item prop="sysRegionId" label="区域">
                <el-input v-model="sysRegionForm.sysRegionId" placeholder="请输入区域" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="regionCode" label="区域编码">
                <el-input v-model="sysRegionForm.regionCode" placeholder="请输入区域编码" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="regionPath" label="路径">
                <el-input v-model="sysRegionForm.regionPath" placeholder="请输入路径" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="level" label="层级">
                <el-input v-model="sysRegionForm.level" placeholder="请输入层级" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="regionType" label="类型 1推广城市 0国家 2上线发布到前台 9不发布到前台">
                <el-input v-model="sysRegionForm.regionType" placeholder="请输入类型 1推广城市 0国家 2上线发布到前台 9不发布到前台" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="regionName" label="名称">
                <el-input v-model="sysRegionForm.regionName" placeholder="请输入名称" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="zipCode" label="邮编">
                <el-input v-model="sysRegionForm.zipCode" placeholder="请输入邮编" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="telephoneCode" label="电话区号">
                <el-input v-model="sysRegionForm.telephoneCode" placeholder="请输入电话区号" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="regionIcon" label="区域图标">
                <el-input v-model="sysRegionForm.regionIcon" placeholder="请输入区域图标" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="priority" label="优先级">
                <el-input v-model="sysRegionForm.priority" placeholder="请输入优先级" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="parentRegionId" label="上级区域">
                <el-input v-model="sysRegionForm.parentRegionId" placeholder="请输入上级区域" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="description" label="描述">
                <el-input v-model="sysRegionForm.description" placeholder="请输入描述" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="status" label="状态">
                <el-input v-model="sysRegionForm.status" placeholder="请输入状态" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="longitude" label="经度">
                <el-input v-model="sysRegionForm.longitude" placeholder="请输入经度" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="latitude" label="纬度">
                <el-input v-model="sysRegionForm.latitude" placeholder="请输入纬度" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="productCkId" label="配送仓id">
                <el-input v-model="sysRegionForm.productCkId" placeholder="请输入配送仓id 父包含子" auto-complete="off"></el-input>
              </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
			<el-button @click="dialog.visible = false" size="small">取 消</el-button>
			<el-button type="primary" @click="submitFun()" :loading="loading.status" size="small">{{loading.status ? loading.SubText : loading.BtnText}}</el-button>
		</span>
      </el-dialog>
    </el-row>
  </div>
</template>
<script>
  export default {//vue3
    data() {
      return {
        // 表格数据
        tableData: [],
        // 分页数据
        total: 0,
        pageNum: 1,
        pageSize: 8,
        // 表格高度
        tableHeight: 0,
        // 用来存放日期组件所选中的值
        checkedTime: '',
        // 查询参数
        searchForm: {sysRegionId: null, startTime: null, endTime: null,},
        // 弹出层
        dialog: {flag: 0, dialogTitle: "", visible: false},
        // 菜单弹出层
        menuDialog: {dialogTitle: "", visible: false},
        // 表单参数
        sysRegionForm: {
          sysRegionId: null,
          currencyHlId: null,
          regionCode: null,
          regionPath: null,
          level: null,
          regionType: null,
          regionName: null,
          zipCode: null,
          telephoneCode: null,
          regionIcon: null,
          priority: null,
          parentRegionId: null,
          description: null,
          status: null,
          longitude: null,
          latitude: null,
          productCkId: null,
        },
        // 提交按钮文字
        loading: {status: false,BtnText: '确 定',SubText: '提交中...'},
        // 表单校验
        rules: {
          sysRegionId: [{required: true,trigger: "change",message: "请输入区域"}],
          currencyHlId: [{required: true,trigger: "change",message: "请输入币种汇率"}],
          regionCode: [{required: true,trigger: "change",message: "请输入区域编码"}],
          regionPath: [{required: true,trigger: "change",message: "请输入路径"}],
          level: [{required: true,trigger: "change",message: "请输入层级"}],
          regionType: [{required: true,trigger: "change",message: "请输入类型 1推广城市 0国家 2上线发布到前台 9不发布到前台"}],
          regionName: [{required: true,trigger: "change",message: "请输入名称"}],
          zipCode: [{required: true,trigger: "change",message: "请输入邮编"}],
          telephoneCode: [{required: true,trigger: "change",message: "请输入电话区号"}],
          regionIcon: [{required: true,trigger: "change",message: "请输入区域图标"}],
          priority: [{required: true,trigger: "change",message: "请输入优先级"}],
          parentRegionId: [{required: true,trigger: "change",message: "请输入上级区域"}],
          description: [{required: true,trigger: "change",message: "请输入描述"}],
          status: [{required: true,trigger: "change",message: "请输入状态"}],
          longitude: [{required: true,trigger: "change",message: "请输入经度"}],
          latitude: [{required: true,trigger: "change",message: "请输入纬度"}],
          productCkId: [{required: true,trigger: "change",message: "请输入配送仓id 父包含子"}],
        },
        // 所有权限数据
        treeData: [],
        // 树形控件的属性绑定对象
        treeProps: {children: 'children', label: 'label'},
        // 默认选中的节点id值
        defKeys: [],
        // 角色id
        roleId: null
      };
    },
    mounted() {
      this.$nextTick(() => {
        this.tableHeight = window.innerHeight - 205;
      });
    },
    created() {
      this.getDataList();
    },
    watch: {
      "checkedTime"(value) {
        this.searchForm.startTime = null;
        this.searchForm.endTime = null;
        if (value != null) {
          let timeArr = value.toString().split(",");
          timeArr.forEach((item,i) => {
            if(i === 0) {
              this.searchForm.startTime = item;
            }else {
              this.searchForm.endTime = item;
            }
          });
        }
      }
    },
    methods: {
      handleSizeChange(val) {
        this.pageSize = val
        this.getDataList()
      },
      handleCurrentChange(val) {
        this.pageNum = val
        this.getDataList()
      },
      // 获取区域列表
      getDataList() {
        this.$api.sys_sysRegion.list({
          current: this.pageNum,
          size: this.pageSize,
          sysRegionId: this.searchForm.sysRegionId,
          startTime: this.searchForm.startTime,
          endTime: this.searchForm.endTime
        }).then(res => {
          if(res.data.code === 2000) {
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
          }
        })
      },
      // 新增按钮操作
      openAdd() {
        this.dialog.flag = 0;
        this.resetForm("sysRegionForm");
        this.dialog.dialogTitle = "新增区域";
        this.dialog.visible = true;
      },
      // 更新按钮操作
      openUpdate(row) {
        this.dialog.flag = 1;
        this.resetForm("sysRegionForm");
        this.dialog.dialogTitle = "编辑区域";
        this.dialog.visible = true;
        this.getById(row.sysRegionId);
      },
      // 提交数据操作
      submitFun() {
        this.$refs.sysRegionForm.validate(valid => {
          if(valid){
            this.loading.status = true;
            this.$api.sys_sysRegion.saveOrUpdate(this.sysRegionForm,this.dialog.flag).then(res => {
              if (res.data.code === 2000) {
                this.$message.success(res.data.msg);
                if(this.dialog.flag === 0){
                  this.pageNum = 1;
                }
                this.getDataList();
                // 关闭弹框
                this.dialog.visible = false;
                // 关闭加载
                this.loading.status = false;
              }else{
                this.$message.error(res.data.msg);
                this.loading.status = false;
                return false;
              }
            })
          }
        })
      },
      // 根据id获取区域信息
      getById(id) {
        this.$api.sys_sysRegion.getById(id).then(res => {
          if (res.data.code === 2000) {
            this.sysRegionForm.sysRegionId = res.data.data.sysRegionId;
            this.sysRegionForm.currencyHlId = res.data.data.currencyHlId;
            this.sysRegionForm.regionCode = res.data.data.regionCode;
            this.sysRegionForm.regionPath = res.data.data.regionPath;
            this.sysRegionForm.level = res.data.data.level;
            this.sysRegionForm.regionType = res.data.data.regionType;
            this.sysRegionForm.regionName = res.data.data.regionName;
            this.sysRegionForm.zipCode = res.data.data.zipCode;
            this.sysRegionForm.telephoneCode = res.data.data.telephoneCode;
            this.sysRegionForm.regionIcon = res.data.data.regionIcon;
            this.sysRegionForm.priority = res.data.data.priority;
            this.sysRegionForm.parentRegionId = res.data.data.parentRegionId;
            this.sysRegionForm.description = res.data.data.description;
            this.sysRegionForm.status = res.data.data.status;
            this.sysRegionForm.longitude = res.data.data.longitude;
            this.sysRegionForm.latitude = res.data.data.latitude;
            this.sysRegionForm.productCkId = res.data.data.productCkId;
          }
        });
      },
      // 根据id删除区域
      deleteFun(row) {
        this.$confirm("确定删除当前区域吗？", "系统提示", {confirmButtonText: "确定", cancelButtonText: "取消", type: 'error'
        }).then(() =>{
          this.$api.sys_sysRegion.remove(row.sysRegionId).then(res => {
            if(res.data.code === 2000){
              this.$message.success(res.data.msg);
              this.getDataList()
            }else {
              this.$message.error(res.data.msg);
            }
          })
        }).catch(() => {
          this.$message.info("取消删除");
        });
      },
      // 清空表单
      resetForm(formName) {
        if (this.$refs[formName]) {
          this.$refs[formName].resetFields();
        }
      },
    }
  }
</script>
<style lang="less" scoped>
  .el-search-item {
    margin-bottom: 0;
  }
  .el-card/deep/.el-card__body {
    padding: 0 10px 10px 10px !important;
  }
  .el-card/deep/.el-card__header {
    border-bottom: none !important;padding: 10px 10px !important;
  }
</style>